<template>
    <div class="wh100p">
        <div>
            <!-- 日期 加 时间 范围选择  -->
            <a-range-picker
                :allowClear="false"
                v-if="option.type=='dayTime'"
                format="YYYY/MM/DD"
                :placeholder="['开始时间', '结束时间']"
                :value="timeObj[option.type].rangetime"
                @change="onOk"
                @calendarChange="onOk"
                :disabled-date="disabledDate"
            >
                <a-icon
                    slot="suffixIcon"
                    type="calendar"
                />
            </a-range-picker>


            <el-date-picker v-show="option.type=='monthTimeRange'"
                            v-model="timeObj[option.type].rangetime"
                            :prefix-icon="'--'"
                            style="width: 100% "
                            :editable="false"
                            type="monthrange"
                            range-separator="~"
                            :picker-options="pickerOptions"
                            @change="elDateOnPick"
                            :clearable="clearable"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份">
            </el-date-picker>
        </div>
    </div>
</template>

<script>
import moment from "moment";
let that = this;
export default {

    props: {
        option: {
            type: Object,
            default: () => {
                return {
                    type: "dayTime",
                    rangetime: []
                };
            }
        },
        maxLengthToMonth: {
            type: Number,
            default: 36
        },
        maxLengthToDay: {
            type: Number,
            default: 90
        },
        clearable:{
            // 是否展示清除按钮,目前只有在月份范围选择中起效
            type:Boolean,
            default:false,
        },
        future:{
            // 是否允许选择今天之后的时间
            type:Boolean,
            default:false,
        }


    },

    data() {

        return {
            canSend: true,// 是否 可以发送 请求
            startValue: null,
            endValue: null,
            startDate:"",
            moment,
            timeObj: {
                dayTime: {
                    rangetime: []
                },
                monthTimeRange: {
                    rangetime: [],
                    rangetime_value: []
                }
            },

            pickerOptions: {
                disabledDate(time) {
                    // 限制月份选择的跨度
                    // console.log(" moment(startDate).diff(moment(time),'month')");
                    // console.log(" moment(startDate).diff(moment(time),'month')");
                    // console.log(moment(startDate).diff(moment(time), 'month'));
                    //
                    // let diffMonth = Math.abs(moment(that.startDate).diff(moment(time),'month'))
                    // // console.log(diffMonth);
                    //
                    // if(that.startDate && (diffMonth >= that.maxLengthToMonth -1)){
                    //
                    //     return true
                    // }

                    // 大于当前月份不可选择
                    return (moment(time).isAfter(moment(), 'month') && !that.future)
                },
                onPick({minDate,maxDate}){
                    // that.startDate = minDate


                }
            }
        };
    },
    mounted() {
        that = this;
        if (this.option.type == 'monthTimeRange') {
            this.startValue = this.option.rangetime[0]
            this.endValue = this.option.rangetime[1]
            this.timeObj[this.option.type].rangetime = JSON.parse(JSON.stringify(this.option.rangetime))
        } else {
            this.timeObj.dayTime.rangetime = JSON.parse(JSON.stringify(this.option.rangetime))
        }
    },
    methods: {
        elDateOnPick(value) {
            if(moment(value[1]).diff(moment(value[0]),'month') >= this.maxLengthToMonth){
                this.$message.warning(`时间跨度最多不能超过${this.maxLengthToMonth}个月`)
                return;
            }

            this.timeObj[this.option.type].rangetime = value;
            this.$emit('handlePanelChange', this.timeObj[this.option.type].rangetime)
        },
        range(start, end) {
            const result = [];
            for (let i = start; i < end; i++) {
                result.push(i);
            }
            return result;
        },
        onOk(value) {
            if (value) {
                this.timeObj[this.option.type].rangetime = value[1] ? [
                    value[0] && value[0].format("YYYY/MM/DD"),
                    value[1] && value[1].format("YYYY/MM/DD")
                ] : [
                    value[0] && value[0].format("YYYY/MM/DD")
                ]

                if (value && value[0] && value[1]) {
                    let f = this.$common.time.getdiffdate(
                        this.timeObj[this.option.type].rangetime[0],
                        this.timeObj[this.option.type].rangetime[1]
                    );

                    console.log(this.timeObj[this.option.type]);
                    // 当两个值 都存在的时候  才发送出去
                    this.$emit('handlePanelChange', this.timeObj[this.option.type].rangetime)
                }
            }
        },
        disabledDate(current) {
            let rangetime = this.timeObj[this.option.type].rangetime;
            let isDis = false;
            if (rangetime[0] && !rangetime[1]) {
                // 这是有开始时间 没有结束时间
                // 最长跨度90天 又开始时间 获取 前后90天的值
                let lengthNum = this.maxLengthToDay
                let now_t = this.$common.common.getNodeDay("", rangetime[0]);
                let pro14 = now_t.getDayBefore_X_Date(lengthNum);
                let aft14 = now_t.getDayNumDate(lengthNum);
                let pro14_temp = Date.parse(new Date(pro14)) / 1000;
                let aft14_temp = Date.parse(new Date(aft14)) / 1000;
                let cc = moment(current).format("Y/M/D");
                let need_t = Date.parse(new Date(cc)) / 1000;

                if (!(need_t > pro14_temp && need_t < aft14_temp)) {
                    isDis = true;
                }
            }
            return (current && current > moment().endOf("day")) || isDis;
        }
    }
};
</script>

<style lang="less" scoped>
</style>